// 产品数据
const products = [
    {
        id: 1,
        name: '草莓奶油蛋糕',
        image: "cake/product0.jpeg",
        price: '¥198.00',
        unit: '/1.0磅',
        category: 'cake',
        description: '新鲜草莓与奶油的完美结合，每一口都充满水果的香甜。'
    },
    {
        id: 2,
        name: '巧克力慕斯',
        image: "cake/product1.jpeg",
        price: '¥198.00',
        unit: '/1.0磅',
        category: 'cake',
        description: '浓郁巧克力与轻盈慕斯的完美结合。'
    },
    {
        id: 3,
        name: '水果拿破仑',
        image: "cake/product2.jpeg",
        price: '¥198.00',
        unit: '/1.0磅',
        category: 'cake',
        description: '层层酥皮搭配新鲜水果，口感丰富。'
    },
    {
        id: 4,
        name: '抹茶红豆',
        image: "cake/product3.jpeg",
        price: '¥198.00',
        unit: '/1.0磅',
        category: 'cake',
        description: '日式抹茶与红豆的经典搭配。'
    },
    {
        id: 5,
        name: '蓝莓芝士',
        image: "cake/product4.jpeg",
        price: '¥198.00',
        unit: '/1.0磅',
        category: 'cake',
        description: '新鲜蓝莓搭配香芝士，口感细腻。'
    },
    {
        id: 6,
        name: '榴莲千层',
        image: "cake/product5.jpeg",
        price: '¥198.00',
        unit: '/1.0磅',
        category: 'cake',
        description: '马来西亚D24榴莲，层层美味。'
    },
    {
        id: 7,
        name: '芒果千层',
        image: "cake/product6.jpeg",
        price: '¥198.00',
        unit: '/1.0磅',
        category: 'cake',
        description: '新鲜芒果与千层的完美结合。'
    },
    {
        id: 8,
        name: '红丝绒',
        image: "cake/product7.jpeg",
        price: '¥198.00',
        unit: '/1.0磅',
        category: 'cake',
        description: '经典红丝绒蛋糕，浓郁奶香。'
    },
    {
        id: 9,
        name: '巧克力树莓',
        image: "cake/product8.jpeg",
        price: '¥198.00',
        unit: '/1.0磅',
        category: 'cake',
        description: '比利时巧克力配以新鲜树莓。'
    },
    {
        id: 10,
        name: '草莓慕斯杯',
        image: "cake/cake1.png",
        price: '¥68.00',
        unit: '/份',
        category: 'dessert',
        description: '清新草莓与轻盈慕��的完美结合，精致杯装。'
    },
    {
        id: 11,
        name: '抹茶提拉米苏',
        image: "cake/cake2.png",
        price: '¥58.00',
        unit: '/份',
        category: 'dessert',
        description: '日式抹茶与意式甜点的创新组合。'
    },
    {
        id: 12,
        name: '巧克力布朗尼',
        image: "cake/cake3.png",
        price: '¥48.00',
        unit: '/份',
        category: 'dessert',
        description: '浓郁可可与松软蛋糕，搭配新鲜水果。'
    },
    {
        id: 13,
        name: '蓝莓芝士杯',
        image: "cake/cake4.png",
        price: '¥58.00',
        unit: '/份',
        category: 'dessert',
        description: '新鲜蓝莓搭配轻盈芝士，口感细腻。'
    }
];

// 加载产品列表
function loadProducts() {
    const container = document.getElementById('products-container');
    if (!container || !document.querySelector('.category-btn')) return;

    filterProducts('all');
}

// 显示产品预览
function showPreview(productId) {
    const product = products.find(p => p.id === productId);
    if (!product) return;

    const modal = document.getElementById('preview-modal');
    modal.classList.remove('hidden');
    
    modal.querySelector('.bg-white').innerHTML = `
        <div class="relative">
            <img src="${product.image}" 
                 alt="${product.name}" 
                 class="w-full h-64 object-cover rounded-t-lg">
            <button
                onclick="closePreview()"
                class="absolute top-2 right-2 text-white bg-black bg-opacity-50 rounded-full p-2"
            >
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>
        <div class="p-4">
            <h3 class="text-xl font-semibold mb-2">${product.name}</h3>
            <p class="text-gray-600 mb-4">${product.description}</p>
            <div class="flex justify-between items-center">
                <span class="text-[#B3927F] text-lg font-bold">
                    ${product.price}
                    <span class="text-sm text-gray-500 ml-1">${product.unit}</span>
                </span>
                <button 
                    onclick="addToCart(${product.id})"
                    class="bg-[#B3927F] text-white px-4 py-2 rounded-full hover:bg-[#9A7B69]"
                >
                    加入购物车
                </button>
            </div>
        </div>
    `;
}

// 关闭产品预览
function closePreview() {
    const modal = document.getElementById('preview-modal');
    modal.classList.add('hidden');
}

// 初始化
document.addEventListener('DOMContentLoaded', () => {
    loadProducts();
    const animateElements = document.querySelectorAll('.animate-on-scroll');
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate-fade-in');
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1 });

    animateElements.forEach(element => observer.observe(element));
});

// 添加平滑滚动导航
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

// 添加产品卡片3D悬浮效果
document.querySelectorAll('.product-card').forEach(card => {
    card.addEventListener('mousemove', handleHover);
    card.addEventListener('mouseleave', resetCard);
});

function handleHover(e) {
    const card = this;
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    const centerX = rect.width / 2;
    const centerY = rect.height / 2;
    
    const rotateX = (y - centerY) / 20;
    const rotateY = -(x - centerX) / 20;
    
    card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
}

function resetCard() {
    this.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
}

// 导航栏滚动效果
window.addEventListener('scroll', () => {
    const nav = document.querySelector('nav');
    if (window.scrollY > 100) {
        nav.classList.add('nav-scrolled');
    } else {
        nav.classList.remove('nav-scrolled');
    }
});

// 图片加载动画
document.querySelectorAll('.animate-image').forEach(img => {
    img.addEventListener('load', function() {
        this.classList.add('img-loaded');
    });
});

// 添加分类过滤功能
function filterProducts(category) {
    // 更新按钮状态
    document.querySelectorAll('.category-btn').forEach(btn => {
        btn.classList.remove('bg-[#B3927F]', 'text-white');
        btn.classList.add('text-gray-600');
    });
    document.querySelector(`[onclick="filterProducts('${category}')"]`).classList.add('bg-[#B3927F]', 'text-white');

    // 获取所有产品卡片
    const allCards = document.querySelectorAll('.product-card');
    
    if (category === 'all') {
        // 显示所有产品
        allCards.forEach(card => {
            card.style.display = '';
        });
    } else {
        // 根据分类显示/隐藏产品
        allCards.forEach(card => {
            const cardCategory = card.getAttribute('data-category');
            if (cardCategory === category) {
                card.style.display = '';
            } else {
                card.style.display = 'none';
            }
        });
    }

    // 重新初始化动画
    initializeAnimations();
}

// 初始化动画
function initializeAnimations() {
    const animateElements = document.querySelectorAll('.animate-on-scroll');
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate-fade-in');
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1 });

    animateElements.forEach(element => observer.observe(element));
}

// 显示提示信息
function showToast() {
    const toast = document.getElementById('toast-message');
    toast.classList.remove('hidden', 'translate-y-[-100%]');
    toast.classList.add('translate-y-0');
    
    // 2秒后自动隐藏
    setTimeout(() => {
        toast.classList.add('translate-y-[-100%]');
        setTimeout(() => {
            toast.classList.add('hidden');
        }, 300);
    }, 2000);
}

// 添加到购物车
function addToCart(productId) {
    const product = products.find(p => p.id === productId);
    if (!product) return;
    
    // 获取购物车数据
    let cart = JSON.parse(localStorage.getItem('cart')) || [];
    
    // 检查商品是否已在购物车中
    const existingItem = cart.find(item => item.id === productId);
    
    if (existingItem) {
        existingItem.quantity += 1;
    } else {
        cart.push({
            id: product.id,
            name: product.name,
            price: product.price,
            image: product.image,
            quantity: 1
        });
    }
    
    // 保存购物车数据
    localStorage.setItem('cart', JSON.stringify(cart));
    
    // 更新购物车计数
    updateCartCount();
    
    // 显示提示信息
    showToast();
} 